<template>
  <div class="body">
    <NavBar @func="getMsgFormSon" @func1="getMsgFormSon1" @func2="getMsgFormSon2"></NavBar>
    <div class="title" :style="{marginTop: (msgFormSon+msgFormSon1+5)+ 'px'}">
        <image class="img" :src="avatarUrl"></image>
        <text class="font1">{{name}}</text>
        <!--<text class="font2">{{phone}}</text>-->
    </div>
    <div class="title2">
      <div class="title3">
        <text class="font3">我的订单</text>
        <div class="content" v-on:click="goToOrder">
          <text class="font4">全部订单</text>
          <image :src="smallTurn" class="smallTurn"></image>
        </div>
      </div>
      <div class="title4">
        <div class="content2" @click="goPayment">
          <image :src="payment" class="payment"></image>
          <text class="font5">待付款</text>
        </div>
        <div class="content2" @click="goDelivery">
          <image :src="deliver" class="deliver"></image>
          <text class="font6">待发货</text>
        </div>
        <div class="content2" @click="goReceived">
          <image :src="receiving" class="receiving"></image>
          <text class="font6">待收货</text>
        </div>
        <div class="content2" @click="goRefund">
          <image :src="refund" class="refund"></image>
          <text class="font6">退款</text>
        </div>
      </div>
      <div class="title5" @click="goSetting">
        <image :src="set" class="set" @click="goSetting"></image>
        <text class="font7">账号设置</text>
        <image :src="bigTurn" class="bigTurn"></image>
      </div>
      <div class="title6">
        <image :src="help" class="set"></image>
        <text class="font7">帮助</text>
        <image :src="bigTurn" class="bigTurn2"></image>
      </div>
      <div class="title6" @click="goAboutUs">
        <image :src="i" class="set"></image>
        <text class="font7">关于我们</text>
        <image :src="bigTurn" class="bigTurn"></image>
      </div>
    </div>
  </div>
</template>

<script>
  import NavBar from '@/components/navbar'
  export default {
      components: {
        NavBar,
      },
      mounted() {
        wx.startPullDownRefresh();
        var that = this;
        wx.getStorage({
          key: 'userInfo',
          success (res) {
            that.name = res.data.nickName;
            that.avatarUrl = res.data.avatarUrl;
          }
        })
        wx.stopPullDownRefresh();
      },
      data() {
        return {
          name:"用户微信名称",
          phone:"138****3456",
          smallTurn:'/static/images/smallTurn.png',
          payment:'/static/images/payment.png',
          deliver:'/static/images/deliver.png',
          receiving:'/static/images/receiving.png',
          refund:'/static/images/refund.png',
          set:'/static/images/set.png',
          help:'/static/images/help.png',
          i:'/static/images/i.png',
          bigTurn:'/static/images/bigTurn.png',
          avatarUrl:"",
          msgFormSon: '',
          msgFormSon1: '',
        }
      },
      methods: {
        getMsgFormSon(data) {
          this.msgFormSon = data;
        },
        getMsgFormSon1(data) {
          this.msgFormSon1 = data;
        },
        goSetting(){
          wx.navigateTo({
            url:'/pages/setting/main'
          });
        },
        goToOrder(){
          wx.navigateTo({
            url:'/pages/order/main?dealStatus=4'
          });
        },
        goPayment(){
          wx.navigateTo({
            url:'/pages/order/main?dealStatus=0'
          });
        },
        goAboutUs(){
          wx.navigateTo({
            url:'/pages/aboutUs/main'
          });
        },
        goDelivery(){
          wx.navigateTo({
            url:'/pages/order/main?dealStatus=1'
          });

        },
        goReceived(){
          wx.navigateTo({
            url:'/pages/order/main?dealStatus=2'
          });
        },
        goRefund(){
          wx.navigateTo({
            url:'/pages/order/main?dealStatus=3'
          });
        },
      },
    }
</script>

<style scoped>
  .body{
    background:rgba(247,247,247,1);
    width: 100%;
    height: 100%;
  }
  .title{
    width:375px;
    height:134px;
    background-color:rgba(255,255,255,1);
    /*margin-top: 60px;*/
    display: flex;
    flex-direction: row;
  }
  .img{
    width:74px;
    height:74px;
    background-color:rgba(255,255,255,1);
    border-radius:8px;
    border:1px solid rgba(231,231,231,1);
    margin-left:16px ;
    margin-top: 30px;
  }
  .font1{
    width:96px;
    height:22px;
    font-size:16px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(0,0,0,1);
    line-height:22px;
    margin-left: 16px;
    margin-top: 42px;
  }
  .font2{
    width:85px;
    height:20px;
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:20px;
    margin-left: -96px;
    margin-top: 73px;
  }
  .title2{
    margin-top:8px;
    width:375px;
    height:124px;
    background-color:rgba(255,255,255,1);
    border-radius:4px;
  }
  .font3{
    width:60px;
    height:21px;
    font-size:15px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(0,0,0,1);
    line-height:21px;
    margin-left: 24px;
    margin-top:12px;
  }
  .font4{
    width:48px;
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:17px;
  }
  .content{
    margin-left: 219px;
    margin-top:14px;
  }
  .smallTurn{
    margin-left: 3px;
    width: 6px;
    height: 10px;
  }
  .title3{
    display: flex;
    flex-direction: row;
  }
  .title4{
    width:375px;
    height:75px;
    display: flex;
    flex-direction: row;
    margin-top: 12px;
  }
  .payment{
    width: 45px;
    height: 45px;
    margin-left: 30px;
  }
  .deliver{
    width: 45px;
    height: 45px;
    margin-left: 45px;
  }
  .receiving{
    width: 45px;
    height: 45px;
    margin-left: 45px;
  }
  .refund{
    width: 45px;
    height: 45px;
    margin-left: 45px;
  }
  .content2{
    display: flex;
    flex-direction: column;
  }
  .font5{
    margin-left: 35px;
    width:36px;
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:17px;
  }
  .font6{
    margin-left: 54px;
    width:36px;
    height:17px;
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:17px;
  }
  .title5{
    margin-top:10px;
    width:375px;
    height:45px;
    background-color:rgba(255,255,255,1);
    display: flex;
    flex-direction: row;
  }
  .set{
    width: 30px;
    height: 30px;
    margin-top: 8px;
    margin-left: 17px;
  }
  .font7{
    margin-top: 12px;
    margin-left: 5px;
  }
  .bigTurn{
    width: 8px;
    height: 12px;
    margin-top: 16px;
    margin-left: 236px;
  }
  .title6{
    margin-top:1px;
    width:375px;
    height:45px;
    background-color:rgba(255,255,255,1);
    display: flex;
    flex-direction: row;
  }
  .bigTurn2{
    width: 8px;
    height: 12px;
    margin-top: 16px;
    margin-left: 267px;
  }
</style>
